<template>
  <div>
    <div v-show="fenlei_flag">
      <div v-for="i in fenlei_list">

        <el-card>
          <el-link
              style="font-size: 20px"
              @click="getCaipuByFenlei(i.category)">{{i.category}}</el-link>
          <el-row>
            <el-col :span="3" v-for="j in i.categoryInfo">
              <el-link
                  style="font-size: 17px"
                  @click="getCaipuByFenlei(j)">{{j}}</el-link>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </div>

    <!--展示分类结果-->
    <h1>查询结果<el-button @click="backCategory()">返回</el-button></h1>
    <el-row>
      <el-col :span="5"  offset="1" v-for="item in get_caipu_by_fenlei">
        <el-card class="mei_ri_tui_jian" style=" margin-top: 8px;">
          <el-image
              style="height: 215px;width: 215px;"
              src="https://i3.meishichina.com/attachment/recipe/2018/04/24/20180424152455550644713.jpg?x-oss-process=style/c320"></el-image>
          <el-link :href="'/detail/'+item.idCookbook">{{item.cookbookName}}</el-link>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "list",
  data: function () {
    return {
      fenlei_list:[],
      get_caipu_by_fenlei:[],
      current_category:"",
      fenlei_flag:true
    }
  },
  mounted() {
    this.listCaipuList()
  },
  methods: {
    // 获取分类信息
    async listCaipuList(){
      let _this = this;
      let cookbookName = _this.searchKey
      let {data:res} = await _this.$http.get(
          process.env.VUE_APP_SERVER + '/caipu-list/getFenlei'
      )
      _this.fenlei_list=res.data
      console.log(_this.fenlei_list)
    },
    //
    async getCaipuByFenlei(category){
      let _this = this;
      console.log(category+'--》查找的分类')
      let cookbookName = _this.searchKey
      let {data:res} = await _this.$http.get(
          process.env.VUE_APP_SERVER + '/caipu-list/getCaipuByFenlei?category='+category
      )
      _this.get_caipu_by_fenlei=res.data
      console.log(_this.get_caipu_by_fenlei)
      _this.fenlei_flag=false
    },
    // 返回分类主页
    async backCategory(){
      console.log('返回分类主页')
      this.fenlei_flag=true
    },
  }
}
</script>

<style scoped>
.mei_ri_tui_jian{
  height: 280px;
  width: 260px
}
</style>